<!DOCTYPE html>
<html>

<head>
    <!-- 设置字符编码 -->
    <meta charset="UTF-8">
    <!-- 禁止移动端页面缩放 -->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport;" />
    <!-- 阻止浏览器缓存页面内容 -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <!-- 设置样式表 -->
    <title>登录 - 校园帮帮</title>
    <link rel="stylesheet" href="/stylesheets/root.css">
    <link rel="stylesheet" href="/stylesheets/login.css">

</head>

<body>
    <div class="top">
        <div class="top-box">
            <p>欢迎登录</p>
            <p>校园精彩，等你发现</p>
        </div>
    </div>
    <div class="login">
        <!-- <form action="/login.html" method="get"> -->
            <input class="userName" type="text" name="userName" placeholder=" 请输入账号">
            <span id="nameMess"></span>
            <input class="userPswd" type="password" name="userPswd" placeholder=" 请输入密码">
            <span id="PswdMess"></span>
            <div class="link-box">
                <a class="register-link" href="/register.html">注册</a>
                <a class="forget-pswd-link" href="#">忘记密码</a>
            </div>
            <div class="submit-box">
                <input class="form-submit" type="button" value="登 录">
            </div>
        <!-- </form> -->
    </div>
    <div class="check-box"></div>
    <!-- <img src="/public/images/login.js/error.png">  -->

     <!-- lgz添加的js -->
    <script src="/public/javascripts/login.js"></script>

    <!-- 学委添加的js  -->
    <script>
        const userphone = document.querySelector("body > div.login > input.userName")
        const userPassword = document.querySelector("body > div.login > input.userPswd")
        const check_btn = document.querySelector("body > div.login > div.submit-box > input");

        check_btn.addEventListener('click', (e) => {
            const xhr = new XMLHttpRequest();
            const data = {userPhone: userphone.value || "", password: userPassword.value || ""};
            console.log("正在发送登录信息到后端", data);
            xhr.open('post', '/users/login', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function(e) {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        let jwt = xhr.getResponseHeader('authorization');
                        localStorage.setItem('jwt', jwt);
                        localStorage.setItem('use_flag', 'true');
                        // 跳转到新页面
                        let new_a = document.createElement('a');
                        new_a.href = "/main.html";
                        new_a.click();
                    }
                }
            }
            xhr.send(JSON.stringify(data));
        });
    </script>

</body>

</html>
